<template>
	<view class="coupon">
		<view class="coupon-header">
			<view class="coupon-title">
				<u-icon name="arrow-left" size="40" @click="getRouter"></u-icon>
				<view style="text-align: center;width: 86%;font-weight: bold;">优惠券中心</view>
			</view>
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bg-color="rgba(0,0,0,0)" active-color="#2B303D"></u-tabs>
		</view>
		<view class="coupon-list-one">
			<view class="coupon-list" v-for="(item, index) in data" :key="index" @click="useCoupon(item.order_no, item.id)">
				<u-image :src="item.image[0].file_path" width="180rpx" height="180rpx"></u-image>
				<view style="margin-left: 24upx;">
					<view style="font-weight: bold;">{{item.subtitle_title}}</view>
					<view style="margin-top: 10upx;">开始期：{{ item.upper_time }}</view>
					<view style="margin-top: 10upx;">结束期：{{ item.under_time }}</view>
					<view style="margin-top: 15upx;color: #F57E00;font-weight: bold;">￥{{item.goods_price}}</view>
				</view>
				<view class="icon-coupon">
					<!-- <image src="../../static/1-1.png" style="width: 154upx;height: 154upx;"></image> -->
					<image src="../../static/2-1.png" style="width: 154upx;height: 154upx;" v-if="item.is_ticket == '2'"></image>
					<image src="../../static/3-1.png" style="width: 154upx;height: 154upx;" v-if="item.is_ticket == '3'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				data: [],
				list: [{
					name: '全部'
				}, {
					name: '待使用'
				}, {
					name: '已使用'
				}, {
					name: '退款中'
				}],
				current: 0
			}
		},
		watch: {
			'current' () {
				this.getCouponList()
			}
		},
		mounted() {
			this.getCouponList()
		},
		methods:{
			useCoupon (item,id) {
				uni.setStorageSync('useCoupon', item)
				uni.navigateTo({
					url: '/pages/coupon-use/index?useCoupon=' + item + '&couponId=' + id
				})
			},
			change(index) {
				this.current = index;
			},
			getRouter () {
				if(uni.getStorageSync('shopid')){
					uni.navigateTo({
						url: '/pages/merchant/index?shopid='+uni.getStorageSync('shopid')
					})
				}else{
					uni.switchTab({
						url: '/pages/my/index'
					})
				}
			
			},
			getCouponList() {
				this.$request('', '/api/app/coupon/getmycoupon', 'POST', {
					status: this.current
				},{
				}).then(res => {
					this.data = res.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.coupon-list-one{
		height: 100%;
		overflow: auto;
		padding-bottom: 330upx;
	}
	.icon-coupon {
		position: absolute;
		right: 0;
		margin-right: 35upx;
	}
	.coupon{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #EDEDED;
		.coupon-header{
			width: 750upx;
			height: 264upx;
			background: linear-gradient(180deg, #FFD103 0%, #F4B700 100%);
			border-radius: 0upx 0upx 40upx 40upx;
			.coupon-title{
				display: flex;
				padding-top: 110upx;
				padding-left: 20upx;
			}
		}
		.coupon-list{
			width: 686upx;
			height: 228upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 0 auto;
			margin-top: 30upx;
			display: flex;
			align-items: center;
			padding-left: 24upx;
			padding-right: 24upx;
			overflow: hidden;
			position: relative;
		}
	}
</style>
